<template>
    <a-modal :visible="state.visible" :title="modalTitle"   :wrap-class-name="!props.isInModal?'full-modal':''" :width="!props.isInModal?'100%':'70%'" @cancel="handleCancel" @ok="handleOk">
        <AForm ref="formRef" :model="state.formData"  :labelCol="{style:'width:80px'}">
            <ARow>
                <ACol :span="8">
            <AFormItem label="组合名称" name="title" :rules="[{required:true,message:'必填'}]">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.title" :maxlength="30" show-count></AInput>
                <span  v-if="props.isDetail" >{{ state.formData.title }}</span>
            </AFormItem>
            </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
            <AFormItem label="组合简介" name="description">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.description" :maxlength="250" show-count></AInput>
                <span  v-if="props.isDetail" >{{ state.formData.description }}</span>
            </AFormItem>
            </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
                    <AFormItem label="参与人群" :rules="{required:true,message:'必填'}" name="crowdRange">
                        <a-radio-group v-model:value="state.formData.crowdRange" name="crowdRang">
                            <a-radio :value="CrowdRangeEnum.ALL">所有用户</a-radio>
                            <a-radio :value="CrowdRangeEnum.NEW">新会员</a-radio>
                            <!-- <a-radio :value="CrowdRangeEnum.MEMBER">其他会员</a-radio> -->
                        </a-radio-group>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
            <AFormItem label="原始价格" name="originalPrice" :rules="[{required:true,message:'必填'},{pattern:normalPriceRegex,message:'金额有误'}]">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.originalPrice"></AInput>
                <span  v-if="props.isDetail" >{{ state.formData.originalPrice }}</span>
            </AFormItem>
            </ACol>
           
                <ACol :span="8">
            <AFormItem label="销售价格" name="salePrice" :rules="[{required:true,message:'必填'},{pattern:normalPriceRegex,message:'金额有误'}]">
                <AInput  v-if="!props.isDetail"  v-model:value="state.formData.salePrice"></AInput>
                <span  v-if="props.isDetail" >{{ state.formData.salePrice }}</span>
            </AFormItem>
            </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
            <AFormItem label="商品主图" name="mainImage" :rules="[{required:true,message:'必填'}]">
                <UploadImage v-model:value="state.formData.mainImage"></UploadImage>
            </AFormItem>
            </ACol>
            </ARow>
            <AFormItem label="图文内容" name="context">
                <RichEditor v-if="!props.isDetail" v-model:value="state.formData.context"></RichEditor>
                <div  v-if="props.isDetail"  v-html="state.formData.context"></div>
            </AFormItem>
            <AFormItem label="组合商品">
            <div class="mb-10"  v-if="!props.isDetail" >
                <a-button type="primary" @click="addFormGoods">添加参与商品</a-button>
            </div>
            <a-table :data-source="state.formData.goods" :pagination="false">
                <a-table-column key="goodsCode" data-index="goodsCode"  title="商品编码">
                    <template #default="{record}">{{ record.goodsCode }}</template>
                </a-table-column>
                <a-table-column key="goodsName" data-index="goodsName"  title="商品名称">
                    <template #default="{record}">{{ record.goodsName }}</template>
                </a-table-column>
                <a-table-column key="salePrice" data-index="salePrice"  title="销售价格">
                    <template #default="{record}">{{ record.salePrice }}</template>
                </a-table-column>
                <a-table-column key="salePrice" data-index="salePrice"  title="组合数量">
                    <template #default="{record}">{{ record.quantity }}</template>
                </a-table-column>
                <a-table-column v-if="!props.isDetail" key="salePrice" data-index="salePrice"  title="操作">
                    <template #default="{record,index}">
                        <a-button @click="removeGoodsItem(record,index)">移除</a-button>
                    </template>
                </a-table-column>
            </a-table>
        </AFormItem>    
        </AForm>
    </a-modal>
    <GoodsModal  
        v-if="state.goodsModalVisible"
        @ok="receiveGoods" 
        @cancel="state.goodsModalVisible = false"></GoodsModal>
    </template>
    <script lang="ts" setup>
    import RichEditor from "@/components/Tinymce/index.vue";
    import { ResponseVo,PackageTypes, GoodsTypes, CrowdRangeEnum } from "@/type";
    import { reactive,ref,onMounted,computed} from "vue";
    import { PackageService } from "@/service";
    import { GoodsModal } from "@/components/index"
    import UploadImage from "@/components/UploadImage/UploadImage.vue"
    import { message } from "ant-design-vue";
    import { normalPriceRegex } from "@/utils/regex";
    const props = withDefaults(defineProps<{
        current?:Partial<PackageTypes.IPackageItem>;
        isDetail: boolean;
        isInModal: boolean
    }>(),{
        current:():Partial<PackageTypes.IPackageItem>=>({}),
        isDetail:false,
        isInModal:false    
    })
  
    const formRef = ref()
    const emit = defineEmits<{
        (e:"ok"):void,
        (e:"cancel"):void
    }>()
    
    const state = reactive<{
        formData:PackageTypes.IPackageItem;
        visible: boolean,
        promoList:PackageTypes.IPackageItem[],
        goodsModalVisible: boolean
    }>({
        formData:{},
        visible: true,
        promoList:[],
        goodsModalVisible: false
    })
    
    onMounted(()=>{
        state.formData = {...props.current};
    })

    const addFormGoods = ()=>{
        state.goodsModalVisible = true;
    }

    const removeGoodsItem = (record:Partial<GoodsTypes.IGoodsItem>,index:number)=>{
        state.formData.goods?.splice(index,1);
    }

    const modalTitle = computed(()=>{
        if(props.isDetail)return "套餐详情";
        if(props.current.id)return "编辑套餐";
        if(!props.current.id)return "新增套餐";
    })

    const receiveGoods = (values:any)=>{
        values = values.map((value:GoodsTypes.IGoodsItem)=>{
            value.type = 1;
            return value;
        })
        state.goodsModalVisible = false;
        if(state.formData.goods===undefined)state.formData.goods=[];
        state.formData.goods.push(...values);
        console.log("state.formData.goods--->",state.formData.goods)
    }
    
    const handleOk = async()=>{
        formRef.value.validateFields().then(async(valid:boolean)=>{
            if(valid){
                if(!state.formData.goods?.length){
                    return message.error("没有选择参与商品");
                }
                let res:ResponseVo<any>
                if(state.formData.id){
                    res = await PackageService.editPackage(state.formData);
                }else{
                   res = await PackageService.addPackage(state.formData);
                }  
                if(res.code===0){
                    message.success("操作成功！");
                    emit("ok");
                }
               
            }
        })
    }
    
    const handleCancel = ()=>{
        emit("cancel")
    }
    </script>
<style lang="less" scoped>

.scheme-stairs{
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
    :deep(.ant-form-item){
        margin-bottom: 0;
    }
    .stairs-input{
        margin-left:4px;
        margin-right: 4px;
    }
    .scheme-stairs-content{
        display: flex;
        gap:8px;
    }
    .scheme-stairs-label{
        color: #888888;
        margin-right: 8px;
    }
}
</style>